// 标签模板  是ES6 新增的特性，它可以紧跟在函数后面，该函数将被用来调用这个字符串模板


/**
 * 调用之后,这个函数的第一个参数是模板字符串的静态字符串,从第二个参数开始,是模板字符串中变量值,也就是${}里面的值
 */
const div = function (staticStr: TemplateStringsArray, ...args: any[]) {
    console.log(staticStr)
    console.log(args)
    return staticStr.reduce((prev, cur, index) => {
        return prev + cur + (args[index] || '')
    }, '')
}


// eslint-disable-next-line @typescript-eslint/no-unused-expressions
const style = div`
font-size: ${18}px;
font-weight: ${700};
font-family: "微软雅黑";
color: red;
`

console.log(style);


export const TemplateString = () => <div>123</div>
